<template>
  <div>

    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryParams.createTime"
            type="datetime"
            placeholder="请选择时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="订单号">
          <el-input placeholder="请输入订单号" style="width: 200px" v-model="queryParams.orderNo"/>
        </el-form-item>
        <el-form-item label="实付金额">
          <el-input placeholder="请输入实付金额" style="width: 200px" v-model="queryParams.fund"/>
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input placeholder="请输入用户编号" style="width: 200px" v-model="queryParams.userId"/>

        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="queryParams.orderType" placeholder="请选择">
            <el-option value= "1" label="待支付"></el-option>
            <el-option value= "2" label="付款成功"></el-option>
            <el-option value= "3" label="付款失败"></el-option>
            <el-option value= "5" label="提现申请"></el-option>
            <el-option value= "6" label="提现完成"></el-option>
            <el-option value= "7" label="提现失败"></el-option>
            <el-option value= "8" label="异常"></el-option>
            <el-option value= "9" label="平台邀请收益"></el-option>
            <el-option value= "10" label="平台任务收益"></el-option>
            <el-option value= "11" label="好友发布冻结"></el-option>
            <el-option value= "12" label="好友发布冻结返还"></el-option>
            <el-option value= "13" label="置顶消费"></el-option>
            <el-option value= "14" label="名片退款"></el-option>
            <el-option value= "15" label="名片扣款"></el-option>
            <el-option value= "16" label="广场置顶"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员id">
          <el-input placeholder="请输入会员id" style="width: 200px" v-model="queryParams.memberId"/>
        </el-form-item>
        <el-form-item label="订单备注">
          <el-input placeholder="请输入订单备注" style="width: 200px" v-model="queryParams.description"/>
        </el-form-item>


        <el-form-item>
          <el-button icon="el-icon-refresh" type="info" plain @click="refReshQuery()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="OrderInfoList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单主键" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" align="center"></el-table-column>
        <el-table-column prop="fund" label="实付金额" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户编号" align="center"></el-table-column>
        <el-table-column prop="description" label="订单备注" align="center"></el-table-column>
<!--        <el-table-column prop="orderType" label="订单状态" align="center"></el-table-column>-->
        <el-table-column label="订单状态" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag v-if="scope.row.orderType == 1">待支付</el-tag>
            <el-tag v-if="scope.row.orderType == 2">付款成功</el-tag>
            <el-tag v-if="scope.row.orderType == 3">付款失败</el-tag>
            <el-tag v-if="scope.row.orderType == 5">提现申请</el-tag>
            <el-tag v-if="scope.row.orderType == 6">提现完成</el-tag>
            <el-tag v-if="scope.row.orderType == 7">提现失败</el-tag>
            <el-tag v-if="scope.row.orderType == 8">异常</el-tag>
            <el-tag v-if="scope.row.orderType == 9">平台邀请收益</el-tag>
            <el-tag v-if="scope.row.orderType == 10">平台任务收益</el-tag>
            <el-tag v-if="scope.row.orderType == 11">好友发布冻结</el-tag>
            <el-tag v-if="scope.row.orderType == 12">好友发布冻结返还</el-tag>
            <el-tag v-if="scope.row.orderType == 13">置顶消费</el-tag>
            <el-tag v-if="scope.row.orderType == 14">名片退款</el-tag>
            <el-tag v-if="scope.row.orderType == 15">名片扣款</el-tag>
            <el-tag v-if="scope.row.orderType == 16">广场置顶</el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="memberId" label="充值的会员编号" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="deletingById(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openEditDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>


    <el-dialog :visible.sync="insertDialog" :title="title">
      <el-form label-width="120px" :model="insertObj" :rules="rules" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单主键" prop="id">
              <el-input placeholder="请输入订单主键" style="width: 240px" v-model="insertObj.id"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderNo">
              <el-input placeholder="请输入订单号" style="width: 240px" v-model="insertObj.orderNo"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实付金额" prop="fund">
              <el-input placeholder="请输入实付金额" style="width: 240px" v-model="insertObj.fund"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户编号" prop="userId">
              <el-input placeholder="请输入用户编号" style="width: 240px" v-model="insertObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单备注" prop="description">
              <el-input placeholder="请输入订单备注" style="width: 240px" v-model="insertObj.description"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="订单状态" prop="orderType">
              <!--              <el-input placeholder="请输入1代表添加好友后发送密文给用户直接兑换奖金,2人工审核" style="width: 240px" v-model="insertObj.examineType"/>-->
              <el-select v-model="insertObj.orderType" placeholder="请选择状态">
                <el-option value= "1" label="待支付"></el-option>
                <el-option value= "2" label="付款成功"></el-option>
                <el-option value= "3" label="付款失败"></el-option>
                <el-option value= "5" label="提现申请"></el-option>
                <el-option value= "6" label="提现完成"></el-option>
                <el-option value= "7" label="提现失败"></el-option>
                <el-option value= "8" label="异常"></el-option>
                <el-option value= "9" label="平台邀请收益"></el-option>
                <el-option value= "10" label="平台任务收益"></el-option>
                <el-option value= "11" label="好友发布冻结"></el-option>
                <el-option value= "12" label="好友发布冻结返还"></el-option>
                <el-option value= "13" label="置顶消费"></el-option>
                <el-option value= "14" label="名片退款"></el-option>
                <el-option value= "15" label="名片扣款"></el-option>
                <el-option value= "16" label="广场置顶"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值的会员编号" prop="memberId">
              <el-input placeholder="请输入充值的会员编号" style="width: 240px" v-model="insertObj.memberId"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetInsertObj()">重置</el-button>
            <el-button plain type="warning" @click.native="submitInsert()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="updateDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单主键">
              <el-input placeholder="请输入订单主键" style="width: 240px" v-model="updateObj.id"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input placeholder="请输入订单号" style="width: 240px" v-model="updateObj.orderNo"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实付金额">
              <el-input placeholder="请输入实付金额" style="width: 240px" v-model="updateObj.fund"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户编号">
              <el-input placeholder="请输入用户编号" style="width: 240px" v-model="updateObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单备注">
              <el-input placeholder="请输入订单备注" style="width: 240px" v-model="updateObj.description"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态" prop="orderType">
              <!--              <el-input placeholder="请输入1代表添加好友后发送密文给用户直接兑换奖金,2人工审核" style="width: 240px" v-model="insertObj.examineType"/>-->
              <el-select v-model="updateObj.orderType" placeholder="请选择状态">
                <el-option value= "1" label="待支付"></el-option>
                <el-option value= "2" label="付款成功"></el-option>
                <el-option value= "3" label="付款失败"></el-option>
                <el-option value= "5" label="提现申请"></el-option>
                <el-option value= "6" label="提现完成"></el-option>
                <el-option value= "7" label="提现失败"></el-option>
                <el-option value= "8" label="异常"></el-option>
                <el-option value= "9" label="平台邀请收益"></el-option>
                <el-option value= "10" label="平台任务收益"></el-option>
                <el-option value= "11" label="好友发布冻结"></el-option>
                <el-option value= "12" label="好友发布冻结返还"></el-option>
                <el-option value= "13" label="置顶消费"></el-option>
                <el-option value= "14" label="名片退款"></el-option>
                <el-option value= "15" label="名片扣款"></el-option>
                <el-option value= "16" label="广场置顶"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值的会员编号">
              <el-input placeholder="请输入充值的会员编号" style="width: 240px" v-model="updateObj.memberId"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetUpdateObj()">重置</el-button>
            <el-button plain type="warning" @click="submitUpdate()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
//引入api接口
import {deleteOrderInfo, getOrderInfo,insertOrderInfo,updateOrderInfo} from "@/api/orderInfo/orderInfo";
export default {
  name: "OrderInfo",
  data(){
    return {
      queryParams:{current:1,size:8,total:0},//查询对象
      OrderInfoList:[],//展示数据集合
      title:"",//弹窗标题
      insertDialog:false,//新增弹窗
      loading:true,
      //新增对象
      insertObj:{
        id:"",//订单主键
        orderNo:"",//订单号
        fund:"",//实付金额
        userId:"",//用户编号
        description:"",//订单备注
        orderType:"",//订单状态
        memberId:"",//充值的会员编号
      },
      updateDialog:false,//修改弹窗
      //修改对象
      updateObj:{
        id:"",//订单主键
        orderNo:"",//订单号
        fund:"",//实付金额
        userId:"",//用户编号
        description:"",//订单备注
        orderType:"",//订单状态
        memberId:"",//充值的会员编号
      },
      //规则
      rules: {
        id: [{ required: true, message: '请输入订单主键', trigger: 'blur' }],
        orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        fund: [{ required: true, message: '请输入实付金额', trigger: 'blur' }],
        userId: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
        description: [{ required: true, message: '请输入订单备注', trigger: 'blur' }],
        orderType: [{ required: true, message: '请输入订单状态', trigger: 'blur' }],
        memberId: [{ required: true, message: '请输入充值的会员编号', trigger: 'blur' }],
      }
    }
  },
  methods:{
    //查询方法
    getList(){
      //打开加载
      this.loading = true;
      //调用api接口
      getOrderInfo(this.queryParams).then((res)=>{
        //关闭加载
        this.loading = false;
        //赋值展示数据
        this.OrderInfoList = res.data.records;
        //赋值展示总行数
        this.queryParams.total = res.data.total;
        //弹出提示
        this.$message({message: '加载完成', type: 'success'});
      })
    },
    //重置查询方法
    refReshQuery(){
      //重置数据
      this.queryParams.orderNo = null;
      this.queryParams.fund = null;
      this.queryParams.userId = null;
      this.queryParams.orderType = null;
      this.queryParams.memberId = null;
      this.queryParams.description = null;
      this.queryParams.createTime = null;
    },
    //重置新增对象
    resetInsertObj(){
      this.insertObj.id = "";
      this.insertObj.orderNo = "";
      this.insertObj.fund = "";
      this.insertObj.userId = "";
      this.insertObj.description = "";
      this.insertObj.orderType = "";
      this.insertObj.memberId = "";
    },
    //重置修改对象
    resetUpdateObj(){
      this.updateObj.id = "";
      this.updateObj.orderNo = "";
      this.updateObj.fund = "";
      this.updateObj.userId = "";
      this.updateObj.description = "";
      this.updateObj.orderType = "";
      this.updateObj.memberId = "";
    },
    //删除方法
    deletingById(id){
      //调用api接口
      deleteOrderInfo(id).then((res)=>{
        //刷新表格
        this.getList();
        //弹出提示
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //新增弹窗打开方法
    openInsertDialog(){
      //数据重置
      this.resetInsertObj();
      //打开弹窗
      this.insertDialog = true;
      //标题
      this.title = "新增产品";
    },
    //打开修改弹窗
    openEditDialog(ele){
      //赋值
      this.updateObj = ele;
      //打开弹窗
      this.updateDialog = true;
      //标题
      this.title = "修改产品";
    },
    //提交修改
    submitUpdate(){
      //调用修改接口
      updateOrderInfo(this.updateObj).then((res)=>{
        //刷新表格
        this.getList();
        //关闭弹窗
        this.updateDialog = false;
        //弹出错误提示
        this.$message({
          message: "修改成功",
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //提交新增
    submitInsert(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用api接口
          insertOrderInfo(this.insertObj).then((res)=>{
            //刷新表格
            this.getList();
            //关闭弹窗
            this.insertDialog = false;
          }).catch((error)=>{
            //弹出错误提示
            this.$message({
              message: error,
              type: 'error'
            });
          })
        }else{
          //弹出错误提示
          this.$message({
            message: "请将所有必填项进行填写",
            type: 'error'
          });
        }
      })
    },
    //页码更变
    handleCurrentChange(index){
      //赋值数据
      this.queryParams.current = index;
      //调用查询
      this.getList();
    },
    //行数更变
    handleSizeChange(size){
      //重置到第一行
      this.queryParams.current = 1;
      //赋值数据
      this.queryParams.size = size;
      //调用查询
      this.getList();
    }
  },
  created(){
    //获取集合
    this.getList();
  }
}
</script>
